<template>
  <div id="category">
    <div class="article-wrap">
      <!-- 文章管理标题 -->
      <p class="article-list-title">标签管理</p>
      <div class="article-list-wrap">
        <!-- 文章展示 -->
        <el-table ref="singleTable" :data="category" highlight-current-row style="width: 100%">
          <el-table-column property="id" label="ID" width="250"></el-table-column>
          <el-table-column property="name" label="名称"></el-table-column>
          <!-- 文章操作 -->
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="article-paging-wrap">
          <div class="article-paging-left">
            <span>共 {{category.length}} 条</span> /
            <span>共4页</span> /
            <span>第1页</span>
          </div>
          <el-pagination background layout="prev, pager, next" :total="category.length"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data(){
        return {
            category:[]
        }
    },
    methods:{
        handleClick(){

        }
    },
    created(){
        this.$http.get('api/category').then(res=>{
            this.category = res.data
            console.log(res);
        })
    }
};
</script>
<style lang='less'>
#category {
  // 文章管理盒子
  .article-wrap {
    // 文章列表标题
    .article-list-title {
      margin: 0;
      padding: 0;
      height: 40px;
      padding-left: 30px;
      color: #fff;
      background: #0078ff;
      line-height: 40px;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
    }
    // 文章列表盒子
    .article-list-wrap {
      padding: 0 30px;
      //   分页
      .article-paging-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
      }
    }
  }
}
</style>